<template>
  <div class="form-container">
    <!-- 顶部提示 -->
    <div v-if="isShowSubmit">
      <a-alert
        :message="
          '链接将于' + form.collaborationValidityTime + '后失效，请尽快完成填写'
        "
        type="warning"
        show-icon
        class="form-alert"
      >
      </a-alert>
    </div>
    <div
      v-if="isShowSubmit"
      style="width: 90%; padding: 10px 100px; margin-left: 75px"
    >
      <a-divider orientation="left">基本信息</a-divider>
      <dev-contract-save ref="devContractSaveRef" @ok="devContractSaveOk" />
    </div>

    <a-alert
      v-if="isShowSubmit == false && form.contractName == null"
      :message="'当前链接已失效,请联系管理员'"
      type="warning"
      show-icon
      class="form-alert"
    >
    </a-alert>

    <!-- 数据校验码 -->
    <a-modal
      :width="400"
      :visible="visible"
      :confirmLoading="confirmCodeLoading"
      @ok="handleCodeSubmit"
      @cancel="handleCodeCancel"
      cancelText="关闭"
      title="请填写校验码"
    >
      <!-- 校验码 -->
      <a-form-item label="">
        <a-input v-model="checkCode" />
      </a-form-item>
    </a-modal>
    <!-- 弹框 -->
    <a-modal
      title="填写说明"
      :width="800"
      :visible="visibleSm"
      :destroyOnClose="true"
      @ok="handleModalCancel"
      @cancel="handleModalCancel"
      cancelText="关闭"
      :footer="null"
    >
      <div class="instructions-container">
        <div class="instructions-content">
          <!-- 说明内容 -->
          <div class="instructions-text">
            <p>
              此表单由供应商人员进行填写，提交后信息将自动同步至医院端作为供应商主数据信息，请认真填写。
            </p>

            <ol class="instruction-list">
              <li>
                公司名称请填写请填写产品注册证或营业执照上显示的公司全称，税号/社会信用代码作为公司唯一性数据，请确保填写准确无误；
              </li>
              <li>
                企业资质将纳入医院对公司评级标准中的重要信息，请务必填写完整、准确，如证件即将到期或已失效，请及时更换；
              </li>
              <li>
                红色"<span class="required-star">*</span
                >"号项为必填项，提交表单前请认真检查必填项是否填写完整，如果未填写完整则无法正常提交。
              </li>
              <li>填写过程中如关闭网页，将不会保存所填信息，请慎重！</li>
            </ol>
          </div>

          <!-- 确认按钮 -->
          <div class="action-button">
            <a-button type="primary" @click="handleModalCancel">
              已明白
            </a-button>
          </div>
        </div>
      </div>
      <template slot="footer"></template>
    </a-modal>
  </div>
</template>

<script>
import moment from 'moment'
import md5 from 'md5'
import WImageUpload from '@/components/WxImageUpload/WImageUpload'
import { getAction, postAction } from '@/api/manage'
import DevContractSave from './DevContractSave.vue'
export default {
  name: 'purchase',
  components: {
    WImageUpload,
    DevContractSave,
  },
  data() {
    return {
      visibleDrawer: false,
      visibleSm: false,
      checkCode: '',
      confirmLoading: false,
      confirmCodeLoading: false,
      isShowSubmit: true,
      key: '',
      visible: false,
      loading: false,
      imageUrl: '',
      selectedRegion: '',
      categoryList: [],
      brandList: [],
      detailAddress: '',
      selectedType: 'mainland', // 默认选中"大陆居民"
      selectedType1: '0', // 默认选中"否"
      numberPeriodValidityDate: null,
      businessPeriodValidityDate: null,
      form: {
        isDisabled: '',
      },
      columns: [],

      url: {
        saveInfo: '/system/devContract/save',
        get: '/system/devContract/info',
      },
    }
  },
  computed: {
    editableContactsColumns() {
      return this.columns.filter((col) => col.dataIndex !== 'action')
    },
    // 检查是否有错误
    hasErrors() {
      return this.supplierContactsList.some(
        (row) => row.errors && Object.keys(row.errors).length > 0
      )
    },
  },
  created() {
    this.visible = false
    this.isShowSubmit = false
    if (this.$route.query.key) {
      var key = this.$route.query.key
      getAction(this.url.get, {
        id: null,
        collaborativeKey: key,
      }).then((res) => {
        this.$nextTick(() => {
          if (res.code == '0000') {
            this.visible = true
            this.form = res.result.data
          }
        })
      })
    }
  },
  methods: {
    moment,
    //关闭弹框
    handleModalCancel() {
      this.visibleSm = false
    },

    //校验校验码是否正确
    handleCodeSubmit() {
      this.isShowSubmit = false
      //用户输入的code
      var checkCode = this.checkCode
      if (checkCode == null) {
        this.$message.error('校验码不能为空!')
        return
      }
      //接口返回的加密code
      var code = this.form.checkCode
      //使用md5进行加密
      var md5Code = md5(checkCode)
      if (code == md5Code) {
        this.isShowSubmit = true
        this.visibleSm = true
        this.visible = false
        this.form.isDisabled = '3'
        this.$nextTick(() => {
          this.$refs.devContractSaveRef.edit(this.form)
        })
      } else {
        this.$message.error('校验码输入不正确!')
        return
      }
    },
    handleCodeCancel() {
      this.visible = false
      this.isShowSubmit = false
    },
    devContractSaveOk(val) {
      this.form = val
    },
  },
}
</script>

<style scoped>
.instructions-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 24px;
  background-color: white;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.instructions-content {
  position: relative;
  min-height: 300px;
}

.instructions-title {
  font-size: 18px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.85);
  margin-bottom: 16px;
}

.instructions-text {
  color: rgba(0, 0, 0, 0.85);
  line-height: 1.6;
}

.instruction-list {
  margin: 16px 0;
  padding-left: 24px;
}

.instruction-list li {
  margin-bottom: 12px;
}
.required-star {
  color: #ff4d4f;
  font-weight: bold;
}

.action-button {
  position: absolute;
  right: 0;
  bottom: 0;
}

.drawer-bootom-button {
  bottom: 1%;
}

.form-alert {
  margin-bottom: 24px;
}
</style>
